<script setup>
import {RouterLink} from "vue-router"
</script>
<template>
  <div class="city-change animated bounceIn" style="display: block;">
    <span class="close"></span>
    <div class="title">选择城市
      <span class="city-tab">
            <span class="code1">热门城市:</span>
            <RouterLink title="北京租房" to="/rent/house?cityEnName=bj">北京</RouterLink>
            <RouterLink title="上海租房" to="/rent/house?cityEnName=sh">上海</RouterLink>
            <RouterLink title="广州租房" to="/rent/house?cityEnName=gz">广州</RouterLink>
            <RouterLink title="深圳租房" to="/rent/house?cityEnName=sz">深圳</RouterLink>
        </span>
    </div>
    <div class="title-line"></div>
    <div class="fc-main clear">
      <div class="fl citys-l">
        <ul>
          <li class="clear"><span class="code-title fl">B</span>
            <div class="city-enum fl">
              <RouterLink title="北京租房" to="/rent/house?cityEnName=bj">北京</RouterLink>
            </div>
          </li>
          <li class="clear"><span class="code-title fl">C</span>
            <div class="city-enum fl">
              <RouterLink title="成都租房" to="/rent/house?cityEnName=cd">成都</RouterLink>
              <RouterLink title="重庆租房" to="/rent/house?cityEnName=cq">重庆</RouterLink>
              <RouterLink title="长沙租房" to="/rent/house?cityEnName=cs">长沙</RouterLink>
            </div>
          </li>
          <li class="clear"><span class="code-title fl">D</span>
            <div class="city-enum fl">
              <RouterLink title="大连租房" to="/rent/house?cityEnName=dl">大连</RouterLink>
              <RouterLink title="东莞租房" to="/rent/house?cityEnName=dg">东莞</RouterLink>
            </div>
          </li>
          <li class="clear"><span class="code-title fl">F</span>
            <div class="city-enum fl">
              <RouterLink title="佛山租房" to="/rent/house?cityEnName=fs">佛山</RouterLink>
            </div>
          </li>
          <li class="clear"><span class="code-title fl">G</span>
            <div class="city-enum fl">
              <RouterLink title="广州租房" to="/rent/house?cityEnName=gz">广州</RouterLink>
            </div>
          </li>
          <li class="clear"><span class="code-title fl">H</span>
            <div class="city-enum fl">
              <RouterLink title="杭州租房" to="/rent/house?cityEnName=hz">杭州</RouterLink>
              <RouterLink title="惠州租房" to="/rent/house?cityEnName=hui">惠州</RouterLink>
              <RouterLink title="海口租房" to="/rent/house?cityEnName=hk">海口</RouterLink>
              <RouterLink title="合肥租房" to="/rent/house?cityEnName=hf">合肥</RouterLink>
            </div>
          </li>
        </ul>
      </div>
      <div class="fl citys-r">
        <ul>
          <li class="clear">
            <span class="code-title fl">L</span>
            <div class="city-enum fl">
              <RouterLink title="陵水租房" to="/rent/house?cityEnName=ls">陵水</RouterLink>
              <RouterLink title="廊坊租房" to="/rent/house?cityEnName=lf">廊坊</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">N</span>
            <div class="city-enum fl">
              <RouterLink title="南京租房" to="/rent/house?cityEnName=nj">南京</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">Q</span>
            <div class="city-enum fl">
              <RouterLink title="青岛租房" to="/rent/house?cityEnName=qd">青岛</RouterLink>
              <RouterLink title="琼海租房" to="/rent/house?cityEnName=qh">琼海</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">S</span>
            <div class="city-enum fl">
              <RouterLink title="上海租房" to="/rent/house?cityEnName=sh">上海</RouterLink>
              <RouterLink title="深圳租房" to="/rent/house?cityEnName=sz">深圳</RouterLink>
              <RouterLink title="苏州租房" to="/rent/house?cityEnName=su">苏州</RouterLink>
              <RouterLink title="石家庄租房" to="/rent/house?cityEnName=sjz">石家庄</RouterLink>
              <RouterLink title="沈阳租房" to="/rent/house?cityEnName=sy">沈阳</RouterLink>
              <RouterLink title="三亚租房" to="/rent/house?cityEnName=sanya">三亚</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">T</span>
            <div class="city-enum fl">
              <RouterLink title="天津租房" to="/rent/house?cityEnName=tj">天津</RouterLink>
              <RouterLink title="太原租房" to="/rent/house?cityEnName=ty">太原</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">W</span>
            <div class="city-enum fl">
              <RouterLink title="武汉租房" to="/rent/house?cityEnName=wh">武汉</RouterLink>
              <RouterLink title="无锡租房" to="/rent/house?cityEnName=wx">无锡</RouterLink>
              <RouterLink title="文昌租房" to="/rent/house?cityEnName=wc">文昌</RouterLink>
              <RouterLink title="万宁租房" to="/rent/house?cityEnName=wn">万宁</RouterLink>
            </div>
          </li>
          <li class="clear">
            <span class="code-title fl">X</span>
            <div class="city-enum fl">
              <RouterLink title="厦门租房" to="/rent/house?cityEnName=xm">厦门</RouterLink>
              <RouterLink title="西安租房" to="/rent/house?cityEnName=xa">西安</RouterLink>
              <RouterLink title="西双版纳租房" to="/rent/house?cityEnName=xsbn">西双版纳</RouterLink>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style>
.msgTip {
  font-size: x-large;
  margin: 80px;
  text-align: center;
}

.city-change .fc-main {
  padding: 0 40px;
  height: 335px;
  overflow-y: auto
}

.city-change .fc-main .citys-l {
  width: 50%;
  height: 100%
}

.city-change .fc-main .citys-r {
  width: 50%;
  height: 100%
}

.city-change .fc-main ul {
  display: inline-block
}

.city-change .fc-main li {
  line-height: 41px
}

.city-change .fc-main li .code-title {
  display: inline-block;
  width: 12px;
  margin-right: 10px;
  color: #999999
}

.city-change .fc-main li .city-enum {
  max-width: 250px
}

.city-change .fc-main li .city-enum a {
  margin-left: 7px;
  display: inline-block;
  color: #333333
}

.city-change .fc-main li .city-enum a:hover {
  color: #00b064
}

.city-change .title-line {
  /*width: 590px;*/
  height: 1px;
  background-color: #eeeeee;
  margin: 0 auto;
  margin-bottom: 25px;
  margin-top: 10px
}

.city-change .title {
  text-align: left;
  margin: 30px 40px 0 40px;
  font-size: 22px;
  color: #394043;
  font-weight: bold;
  position: relative
}

.city-change .title .city-tab {
  display: inline-block;
  /*float: right*/
}

.city-change .title .city-tab span {
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
  margin-right: 9px;
  color: #999999
}

.city-change .title .city-tab a {
  font-size: 14px;
  font-weight: normal;
  margin-left: 10px;
  color: #394043
}

.city-change .title .city-tab a:hover {
  color: #00b064
}

.clear {
  display: block;
}

.clear::after {
  content: ".";
  clear: both;
  display: block;
  height: 0px;
  visibility: hidden;
  font-size: 0px;
  line-height: 0;
}

.fl {
  float: left;
}

.fl.citys-l {
  width: 50%;
  height: 100%;
}

.fc-main {
  height: 335px;
  overflow-y: auto;
  padding: 0 40px;
}

.fl.citys-r {
  width: 50%;
  height: 100%;
}
</style>
